<%@ page import="cn.yunhe.bean.Hotel" %>
<%@ page import="cn.yunhe.bean.RoomType" %>
<%@ page import="java.util.List" %>
<%@ page import="cn.yunhe.bean.Comment" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/4
  Time: 16:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="pageTitle.jsp"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>单个酒店</title>
</head>
<script src="jq/jquery-3.1.1.js" type="text/javascript"></script>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    a{
        color: black;
        text-decoration: none;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
        height: 0;
        visibility: hidden;
    }
    .wrap{
        width:1200px;
        margin:0 auto;
    }
    .header ul li{
        float:left;
        list-style:none;
        width:80px;
        height:40px;
        line-height:40px;
        text-align:center;
    }
    .header ul li a{
        color:white;
    }
    .header ul li.home{
        background: red;
    }
    .header ul li:hover{
        background: red;
    }
    .sawMap{

        width: 600px;
        height: 400px;
       /* overflow: hidden;*/
        margin: 0 auto;
    }
    .left{
        float:left;
        width:45%;
        height:800px;
    }
    .right{
        float:right;
        width:45%;
        height:800px;
    }
    .content{
        margin-top:25px;
        width: 1200px;
    }
    .abc{
        width: 600px;
        height: 60px;
        text-align: 0px;
        line-height: 60px;
        background-color: green;
        margin: 20px auto;
    }
    .table1 tr th{
        width:100px;
        height:100px;
        font-size:20px;
        text-align:center;
        background-color:peru;
    }
    .table1 tr td{
        width:100px;
        height:100px;
        font-size:20px;
        text-align:center;
        background-color:palegoldenrod;
    }
    .table1 tr th:hover{
        background:#63B8FF;
    }
    .table1 tr td:hover{
        background:#63B8FF;
    }
    .bottom{
        width:1200px;
        margin:0 auto;
    }
    .conment{
        height: 200px;
        border-bottom: solid 1px black;
        list-style: none;
        margin-top:10px;
    }
    .think{
        float: left;
        width:30%;
        list-style: none;
    }
    .hotelpaging ul{
        float: left;
        width: 100%;
        margin-top: 20px;
        margin-left: 35%;
    }
    .hotelpaging ul li{
        float: left;
        height: 25px;
        width: 25px;
        border:solid 1px #A1A1A1;
        margin-left: 15px;
        list-style: none;
        text-align: center;
    }
    .hotelpaging ul li:last-of-type{
        width: 150px;
        border:none;
    }
    .hotelpaging ul li input{
        height: 25px;
        width: 25px;
    }
    .hotelpaging ul li a{
        text-decoration: none;
        color: black;
    }
    .picc{
        float: left;
        width: 40%;
        list-style: none;
        border-bottom: solid 1px black;
    }
</style>
<body>
<%
    Hotel hotel = (Hotel) request.getAttribute("hotel");
    if (hotel==null){
        request.getRequestDispatcher("RoomServlet").forward(request,response);
    }
    List<Comment> commentList = (List<Comment>) request.getAttribute("commentList");
    if (commentList==null){
        request.getRequestDispatcher("getHotelCommentServlet").forward(request,response);
    }
%>
<!-- 内容区域 -->
<div class="wrap content clearfix">
    <!-- 左半边 -->
    <div class="left ">
        <div>
            <h1>${hotel.hotelName}</h1>
            <img src="${hotel.pic}"class="sawMap">
            <div class="abc">
                <p><a href="#aa">房型</a>&nbsp<a href="#bb">酒店信息</a>&nbsp<a href="#cc">
                    评论区</a></p>
            </div>
            <h2 id="bb">酒店信息</h2>
            <table>
                <tr>
                    <th>基本信息</th>
                    <td>星级评价</td>
                    <td>${hotel.hotelPhone}</td>
                    <td>${hotel.site}</td>
                </tr>
                <tr>
                    <th>酒店设施</th>
                    <td>桑拿洗浴</td>
                    <td>免费停车</td>
                    <td>免费wifi</td>
                </tr>
                <tr>
                    <th>酒店介绍</th>
                    <td colspan="3">${hotel.context}</td>
                </tr>

            </table>
        </div>
    </div>
    <!-- 右半边 -->
    <div class="right">
        <h2 id="aa">酒店房型</h2>
        <form action="SimpleServlet" method="post">
            选择房型：<select name="roomtype">
            <option value="标间">标间</option>
            <option value="大床房">大床房</option>
        </select>
            房间数  ：<select name="roomsize" id="room"><br>
            <option value="1">一间</option>
            <option value="2">二间</option>
            <option value="3">三间</option>
            <option value="4">四间</option>
            <option value="5">五间</option>
            <option value="6">六间</option>
        </select><br>
            入住日期:<input type="text" name="intime">
            退房日期:<input type="text" name="outtime"><br>
            <input type="submit" name="submit" value="立即确认"><br>
        </form>
        <div class="room">
            <table class="table1">
                <tr>
                    <th>房间数</th>
                    <th>酒店价格</th>
                    <th>星级</th>
                    <th>早餐</th>
                </tr>
                    <tr>
                        <td>${hotel.roomCount}</td>
                        <td>${hotel.price}</td>
                        <td>${hotel.favorite}</td>
                        <td>含早</td>
                    </tr>
            </table><br>
        </div>
        <div>
            <ul class="pic clearfix">
                <li class="picc">
                    <img src="img/ai1.png">
                </li>
                <li class="picc">
                    <img src="img/ai2.png">
                </li>
            </ul>
        </div>
    </div>
    <!-- 底部区域 -->
    <div style="width: 100%;margin-top: 20px;">
        <ul class="bottom clearfix">
            <li class="think"><a href="#">全部</a></li>
            <li class="think"><a href="#">好评</a></li>
            <li class="think"><a href="#">差评</a></li>
        </ul>
        <c:forEach items="${commentList}" var="m">
            <ul>
                <li class="conment">${m.comTime}${m.context}
                </li>
            </ul>
        </c:forEach>
    </div>
    <div class="hotelpaging">
        <ul>
            <li>
                <a href=""> < </a>
            </li>
            <li>
                <a href=""> 1 </a>
            </li>
            <li>
                <a href=""> 2 </a>
            </li>
            <li>
                <a href=""> 3 </a>
            </li>
            <li>
                <a href=""> 4 </a>
            </li>
            <li>
                <a href=""> 5 </a>
            </li>
            <li>
                <a href=""> ... </a>
            </li>
            <li>
                <a href="">  </a>
            </li>
            <li>
                <form>
                    跳转到 &nbsp&nbsp
                    <input type="" name=""> &nbsp&nbsp
                    <input type="submit" value="GO">
                </form>
            </li>
        </ul>
    </div>
</body>
</html>
